import React, { memo } from 'react'

import { NavLink } from 'react-router-dom';
import { Input } from 'antd';
import { SearchOutlined } from '@ant-design/icons'

import { HeaderWrapper,HeaderLeft,HeaderRight } from './style';
import { headerLinks } from 'common/local-data'

// 因为HeaderWrapper 是header的最外层的div 这个组件解析后就是一个div 外加一些css 样式
export default memo(function YAppHeader() {
	// 这是页面代码
	const showSelectItem = (item,index)=>{
		if(index<3){
			return (
				<NavLink to={item.link} exact>
					{item.title}
					<i className="sprite_01 icon"></i>
				</NavLink>
			)
		}else{
			return (
				<a href={item.link}>{item.title}</a>
			)
		}
	}
	
	// 这里返回的是jsx 
	return (
		<HeaderWrapper>
			<div className="content wrap-v1">
				<HeaderLeft>
					<a href="#/" className="logo sprite_01"></a>
					<div className="select-list">
						{
							headerLinks.map((item,index)=>{
								return (
									<div key={item.title} className="select-item">
										{showSelectItem(item,index)}
									</div>
								)
							})
						}
					</div>
				</HeaderLeft>
				<HeaderRight>
					<Input className="search" placeholder="音乐 电台 用户 " prefix={<SearchOutlined />}/>	
					<div className="center">创作者中心</div>
					<div>登录</div>
				</HeaderRight>
			</div>   
			<div className="divider"></div>
		</HeaderWrapper>
	)
})
